<template>
    <div class="notebook">
        <div class="flex">
            <h3>笔记</h3>
            <i class="el-icon-close" @click="close"></i>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="写笔记" name="1">
                <v-md-editor v-model="content" mode="edit" placeholder="你可以在此处写笔记【支持markdown语法】"
                    style="margin-top: 10px;"></v-md-editor>
                <div class="sub-btn">
                    <el-button type="primary" round size="medium">保存笔记</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="我的笔记" name="2">


            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    name: "notebook",
    data() {
        return {
            content: "",
            activeName: "1"

        }
    },
    methods: {
        close() {
            this.$parent.closeIdx();
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
}
</script>

<style scoped>
.notebook {
    padding: 0 20px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.sub-btn {
    margin-top: 15px;
    text-align: right;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex i {
    font-size: 24px;
    cursor: pointer;
}
</style>